<template>
	<view class="" style="height: 100%">
		<scroll-view scroll-y="true" class="scroll-Y" :refresher-triggered="triggered" refresher-background="#f4f7f8"
			:refresher-threshold="100" @scrolltolower="onPulling" refresher-enabled="true" @refresherrefresh="onRefresh"
			refresher-default-style="black">
			<view class="carditem" v-for="(item, key) in list" :key="key" @click="itemtap(item)">
				<view class="ddh u-flex u-flex-between">
					<view class="u-line-1" style="flex: 1;">{{$z.$t("订单编号")}}：{{ item.ddh }}</view>
					<u-button type="primary" v-if="item.b_end == 1" text="已完成" style="width: auto; margin: 0"
						size="mini"></u-button>
					<u-button v-else type="success" text="进行中" style="width: auto; margin: 0" size="mini"></u-button>
				</view>
				<view class="sj u-flex u-flex-between" v-if="item.sjyys">
					<view>{{$z.$t("充电预约时间")}}</view>
					<view>{{ item.sjyys }}</view>
				</view>
				<view class="sj u-flex u-flex-between" v-else>
					<view>{{$z.$t("充电时间")}}</view>
					<view>{{ item.cdsjc || item.sjc }}</view>
				</view>
				<view class="sj u-flex u-flex-between">
					<view>{{$z.$t("站点名称")}}</view>
					<view>{{ item.stationName || '加载中...' }}</view>
				</view>
				<view class="je u-flex">
					<view class="u-flex" style="align-items: flex-end">
						<view class="">{{$z.$t("金额")}}</view>
						<text class="text">￥{{ item.je / 100 }}</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" marginBottom="30" />

		</scroll-view>
	</view>
</template>

<script>
	import qs from "qs"
	export default {
		components: {},
		props: {
			seardata: {
				typeof: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				status: "loadmore",
				triggered: false,
				list: [],
				// 新增站点映射表
				stationCache: new Map(),
			};
		},
		computed: {
			reqdata() {
				let r = {
					sjs: `${this.$z.timefn.gettime(360)} 00:00:00`,
					sje: `${this.$z.timefn.gettime("-1")} 00:00:00`,
					// b_end: "0"
					// ...this.seardata
				};
				r.csta = this.list.length;
				r.cmax = 10;
				// r.uUser = 'oJDh-0kurMcT-AlYdr0ONqLFH8H4'
				r.uUser = this.$store.state.user.USearch.uUser
				// sjs	输入	开始时间;格式 YYYY-MM-DD HH-MM-SS
				// sje	输入	结束时间;格式 YYYY-MM-DD HH-MM-SS
				return r;
			},
		},

		// async onLoad() {
		// 	// 在组件加载时请求站点数据并缓存
		// 	await this.fetchStationData();
		// },
		methods: {
			async processStationNames(orders) {
				const pendingRequests = [];

				orders.forEach(order => {
					if (!this.stationCache.has(order.pcs)) {
						pendingRequests.push(
							this.$z.request("/Station", {
								id: order.pcs
							})
							.then(res => {
								const name = res[0]?.pcs || '未知站点';
								this.stationCache.set(order.pcs, name);
								order.stationName = name;
							})
							.catch(() => {
								order.stationName = '请求失败';
							})
						);
					} else {
						order.stationName = this.stationCache.get(order.pcs);
					}
				});

				await Promise.all(pendingRequests);
			},
			async onPulling() {
				if (this.status == "loading") {
					return;
				}
				this.status = "loading";
				await this.getdata()
			},
			async onRefresh() {
				if (this.status == "loading") {
					return;
				}
				this.status = "loading";
				console.log("onRefresh");
				this.triggered = true;
				this.list = [];

				await this.getdata()
				this.triggered = false;
			},
			async getdata() {
				const reqdata = {
					...this.reqdata
				};
				const GetRfCD = await this.$z.request("/GetRfCD", reqdata);


				// 添加异步站点名称处理
				await this.processStationNames(GetRfCD);
				this.list = this.list.concat(GetRfCD);
				this.status = GetRfCD.length >= reqdata.cmax ? "loadmore" : "nomore";
			},

			itemtap(item) {
				if (item.b_end != "1") {
					uni.navigateTo({
						url: `/pages/ChargeUser/ChargeUser?${qs.stringify(item)}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/order/ddxq/ddxq?${qs.stringify(item)}`
					})
				}
			},
		},
	};
</script>

<style lang="scss">
	.scroll-Y {
		height: 100%;
	}

	.carditem {
		background: #fff;
		margin: 30rpx;
		border-radius: 10rpx;

		.ddh {
			height: 100rpx;
			font-size: 30rpx;
			position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.sj {
			height: 80rpx;
			font-size: 28rpx;
			position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.je {
			height: 120rpx;
			justify-content: flex-end;
			padding: 0 30rpx;
			font-size: 24rpx;

			.text {
				font-size: 36rpx;
				font-weight: bold;
				color: #2093f5;
			}
		}
	}
</style>